<template>
	<div class="xw-table">
		<div class="xw-table_header">
			<i v-if="searchMoreShow" :class="searchMore?'el-icon-arrow-up':'el-icon-arrow-down'"
				@click="searchMoreChange" style="color: var(--xw-color-primary);"></i>
			<i class="el-icon-full-screen" @click="launchFullscreen"></i>
			<i class="el-icon-refresh-right" @click="refresh"></i>
		</div>
		<div class="xw-table_content">
			<slot></slot>
		</div>
		<div class="xw-table_footer">
			<slot name='footer'></slot>
		</div>
	</div>
</template>

<script>
	import {
		launchFullscreen,
		exitFullscreen
	} from '@/utils'
	export default {
		props: {
			searchMoreShow: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				searchMore: false,
				switchValue: false
			}
		},
		methods: {
			refresh() {
				this.$emit('refresh')
			},
			searchMoreChange() {
				this.searchMore = !this.searchMore
				this.$emit('searchMoreChange', this.searchMore)
			},
			switchChange(e) {
				this.$emit('switchChange', e)
			},
			launchFullscreen() {
				const element = document.getElementsByClassName('xw-table')[0]
				if (!!!document.fullscreenElement) {
					launchFullscreen(element)
				} else {
					exitFullscreen()
				}

			},
		}
	}
</script>

<style lang="scss">
	$border: 1px solid #eee;

	.xw-table {
		background: var(--xw-content-bgcolor);
		flex: 1;
		overflow: hidden;
		position: relative;
		border-top: $border;
		border-bottom: $border;

		&_content {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		&_header {
			// position: absolute;
			display: flex;
			align-items: center;
			height: 40px;
			padding: 15px;
			justify-content: flex-end;

			>* {
				font-size: 18px;
				cursor: pointer;
				margin-right: 15px;
			}
		}
	}
</style>